<template>
  <div class="order-detail-container">
    <!-- 页面操作区 -->
    <div class="order-actions">
      <h1>订单详情</h1>
      <div class="action-buttons">
        <el-button v-if="!isPrinting" type="primary" @click="handleSave">
          <i class="el-icon-check"></i> 保存修改
        </el-button>
        <el-button v-if="!isPrinting" type="primary" @click="handlePrint">
          <i class="el-icon-printer"></i> 打印订单
        </el-button>
        <el-button @click="handleBack">返回列表</el-button>
      </div>
    </div>

    <!-- 订单内容区 -->
    <div class="order-content">
      <!-- 订单基本信息 -->
      <el-card class="order-card">
        <div slot="header">
          <h2>基本信息</h2>
        </div>
        <div class="order-basic-info">
          <div class="info-row">
            <div class="info-item">
              <span class="label">订单编号：</span>
              <span class="value">{{ orderInfo.orderBasic.orderId }}</span>
            </div>
            <div class="info-item">
              <span class="label">客户名称：</span>
              <el-select
                v-model="orderInfo.orderBasic.customerName"
                placeholder="请选择客户"
                class="edit-input"
                :disabled="isPrinting"
              >
                <el-option label="客户A" value="客户A"></el-option>
                <el-option label="客户B" value="客户B"></el-option>
                <el-option label="客户C" value="客户C"></el-option>
              </el-select>
            </div>
            <div class="info-item">
              <span class="label">客户编码：</span>
              <el-input
                v-model="orderInfo.orderBasic.customerCode"
                class="edit-input"
                :disabled="isPrinting"
              ></el-input>
            </div>
            <div class="info-item">
              <span class="label">下单时间：</span>
              <el-date-picker
                v-model="orderInfo.orderBasic.orderTime"
                type="datetime"
                class="edit-input"
                :disabled="isPrinting"
              ></el-date-picker>
            </div>
          </div>

          <div class="info-row">
            <div class="info-item">
              <span class="label">始发地：</span>
              <el-select
                v-model="orderInfo.orderBasic.origin"
                placeholder="请选择"
                class="edit-input"
                :disabled="isPrinting"
              >
                <el-option label="北京" value="北京"></el-option>
                <el-option label="上海" value="上海"></el-option>
                <el-option label="广州" value="广州"></el-option>
              </el-select>
            </div>
            <div class="info-item">
              <span class="label">目的地：</span>
              <el-select
                v-model="orderInfo.orderBasic.destination"
                placeholder="请选择"
                class="edit-input"
                :disabled="isPrinting"
              >
                <el-option label="北京" value="北京"></el-option>
                <el-option label="上海" value="上海"></el-option>
                <el-option label="广州" value="广州"></el-option>
              </el-select>
            </div>
            <div class="info-item">
              <span class="label">运输类型：</span>
              <el-select
                v-model="orderInfo.orderBasic.transportType"
                placeholder="请选择"
                class="edit-input"
                :disabled="isPrinting"
              >
                <el-option label="公路" value="公路"></el-option>
                <el-option label="铁路" value="铁路"></el-option>
                <el-option label="空运" value="空运"></el-option>
              </el-select>
            </div>
            <div class="info-item">
              <span class="label">订单来源：</span>
              <el-select
                v-model="orderInfo.orderBasic.orderSource"
                placeholder="请选择"
                class="edit-input"
                :disabled="isPrinting"
              >
                <el-option label="线上" value="线上"></el-option>
                <el-option label="线下" value="线下"></el-option>
              </el-select>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 收发信息 -->
      <div class="contact-info">
        <el-card class="contact-card sender-card">
          <div slot="header">
            <h2>发货信息</h2>
          </div>
          <div class="contact-details">
            <div class="info-item">
              <span class="label">联系人：</span>
              <el-input
                v-model="orderInfo.orderBasic.senderContact"
                class="edit-input"
                :disabled="isPrinting"
              ></el-input>
            </div>
            <div class="info-item">
              <span class="label">联系电话：</span>
              <el-input
                v-model="orderInfo.orderBasic.senderPhone"
                class="edit-input"
                :disabled="isPrinting"
              ></el-input>
            </div>
            <div class="info-item">
              <span class="label">详细地址：</span>
              <el-input
                v-model="orderInfo.orderBasic.senderAddress"
                class="edit-input"
                :disabled="isPrinting"
              ></el-input>
            </div>
            <div class="info-item">
              <span class="label">计划发货时间：</span>
              <el-date-picker
                v-model="orderInfo.orderBasic.planSendTime"
                type="datetime"
                class="edit-input"
                :disabled="isPrinting"
              ></el-date-picker>
            </div>
          </div>
        </el-card>

        <el-card class="contact-card receiver-card">
          <div slot="header">
            <h2>收货信息</h2>
          </div>
          <div class="contact-details">
            <div class="info-item">
              <span class="label">联系人：</span>
              <el-input
                v-model="orderInfo.orderBasic.receiverContact"
                class="edit-input"
                :disabled="isPrinting"
              ></el-input>
            </div>
            <div class="info-item">
              <span class="label">联系电话：</span>
              <el-input
                v-model="orderInfo.orderBasic.receiverPhone"
                class="edit-input"
                :disabled="isPrinting"
              ></el-input>
            </div>
            <div class="info-item">
              <span class="label">详细地址：</span>
              <el-input
                v-model="orderInfo.orderBasic.receiverAddress"
                class="edit-input"
                :disabled="isPrinting"
              ></el-input>
            </div>
            <div class="info-item">
              <span class="label">计划收货时间：</span>
              <el-date-picker
                v-model="orderInfo.orderBasic.planReceiveTime"
                type="datetime"
                class="edit-input"
                :disabled="isPrinting"
              ></el-date-picker>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 货物信息 -->
      <el-card class="order-card">
        <div slot="header">
          <h2>货物信息</h2>
          <el-button
            v-if="!isPrinting"
            type="text"
            size="small"
            @click="addGoods"
            class="add-goods-btn"
          >
            <i class="el-icon-plus"></i> 添加货物
          </el-button>
        </div>
        <el-table
          :data="orderInfo.goodsList"
          border
          :header-cell-style="{background: '#f5f7fa'}"
        >
          <el-table-column prop="goodsId" label="序号" width="60"></el-table-column>
          <el-table-column prop="goodsName" label="货物名称">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.goodsName"
                class="edit-input table-input"
                :disabled="isPrinting"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.quantity"
                class="edit-input table-input"
                type="number"
                :disabled="isPrinting"
                @change="calculateGoodsSummary"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="unit" label="单位">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.unit"
                class="edit-input table-input"
                :disabled="isPrinting"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="volume" label="体积(m³)">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.volume"
                class="edit-input table-input"
                type="number"
                :disabled="isPrinting"
                @change="calculateGoodsSummary"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="weight" label="重量(kg)">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.weight"
                class="edit-input table-input"
                type="number"
                :disabled="isPrinting"
                @change="calculateGoodsSummary"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" v-if="!isPrinting">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                style="color: #f56c6c"
                @click="deleteGoods(scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="goods-summary">
          <div class="summary-item">
            <span class="label">总数量：</span>
            <span class="value">{{ orderInfo.orderBasic.totalQuantity }}</span>
          </div>
          <div class="summary-item">
            <span class="label">总体积：</span>
            <span class="value">{{ orderInfo.orderBasic.totalVolume }} m³</span>
          </div>
          <div class="summary-item">
            <span class="label">总重量：</span>
            <span class="value">{{ orderInfo.orderBasic.totalWeight }} kg</span>
          </div>
        </div>
      </el-card>

      <!-- 其他信息 -->
      <div class="other-info">
        <el-card class="other-card">
          <div slot="header">
            <h2>车辆需求</h2>
          </div>
          <div class="other-details">
            <div class="info-item">
              <span class="label">车型：</span>
              <el-select
                v-model="orderInfo.vehicleRequirement.vehicleType"
                placeholder="请选择"
                class="edit-input"
                :disabled="isPrinting"
              >
                <el-option label="厢式货车" value="厢式货车"></el-option>
                <el-option label="冷藏车" value="冷藏车"></el-option>
                <el-option label="平板车" value="平板车"></el-option>
              </el-select>
            </div>
            <div class="info-item">
              <span class="label">车长：</span>
              <el-select
                v-model="orderInfo.vehicleRequirement.vehicleLength"
                placeholder="请选择"
                class="edit-input"
                :disabled="isPrinting"
              >
                <el-option label="4.2米" value="4.2米"></el-option>
                <el-option label="6.8米" value="6.8米"></el-option>
                <el-option label="9.6米" value="9.6米"></el-option>
              </el-select>
            </div>
            <div class="info-item">
              <span class="label">用车数量：</span>
              <el-input
                v-model="orderInfo.vehicleRequirement.vehicleCount"
                class="edit-input"
                type="number"
                :disabled="isPrinting"
              ></el-input>
            </div>
          </div>
        </el-card>

        <el-card class="other-card">
          <div slot="header">
            <h2>费用信息</h2>
          </div>
          <div class="other-details">
            <div class="info-row">
              <div class="info-item">
                <span class="label">计费方式：</span>
                <el-select
                  v-model="orderInfo.costInfo.billingMethod"
                  placeholder="请选择"
                  class="edit-input"
                  :disabled="isPrinting"
                >
                  <el-option label="按重量" value="按重量"></el-option>
                  <el-option label="按体积" value="按体积"></el-option>
                </el-select>
              </div>
              <div class="info-item">
                <span class="label">运输费：</span>
                <el-input
                  v-model="orderInfo.costInfo.transportFee"
                  class="edit-input"
                  type="number"
                  :disabled="isPrinting"
                  @change="calculateTotalCost"
                ></el-input>
              </div>
              <div class="info-item">
                <span class="label">包装费：</span>
                <el-input
                  v-model="orderInfo.costInfo.packagingFee"
                  class="edit-input"
                  type="number"
                  :disabled="isPrinting"
                  @change="calculateTotalCost"
                ></el-input>
              </div>
              <div class="info-item">
                <span class="label">燃油费：</span>
                <el-input
                  v-model="orderInfo.costInfo.fuelFee"
                  class="edit-input"
                  type="number"
                  :disabled="isPrinting"
                  @change="calculateTotalCost"
                ></el-input>
              </div>
            </div>

            <div class="info-row">
              <div class="info-item">
                <span class="label">装卸费：</span>
                <el-input
                  v-model="orderInfo.costInfo.loadingUnloadingFee"
                  class="edit-input"
                  type="number"
                  :disabled="isPrinting"
                  @change="calculateTotalCost"
                ></el-input>
              </div>
              <div class="info-item">
                <span class="label">服务费：</span>
                <el-input
                  v-model="orderInfo.costInfo.serviceFee"
                  class="edit-input"
                  type="number"
                  :disabled="isPrinting"
                  @change="calculateTotalCost"
                ></el-input>
              </div>
              <div class="info-item">
                <span class="label">保险费：</span>
                <el-input
                  v-model="orderInfo.costInfo.insuranceFee"
                  class="edit-input"
                  type="number"
                  :disabled="isPrinting"
                  @change="calculateTotalCost"
                ></el-input>
              </div>
              <div class="info-item">
                <span class="label">中转费：</span>
                <el-input
                  v-model="orderInfo.costInfo.transferFee"
                  class="edit-input"
                  type="number"
                  :disabled="isPrinting"
                  @change="calculateTotalCost"
                ></el-input>
              </div>
            </div>

            <div class="info-row">
              <div class="info-item">
                <span class="label">其他费用：</span>
                <el-input
                  v-model="orderInfo.costInfo.otherFee"
                  class="edit-input"
                  type="number"
                  :disabled="isPrinting"
                  @change="calculateTotalCost"
                ></el-input>
              </div>
              <div class="info-item">
                <span class="label">费用合计：</span>
                <span class="value total">{{ orderInfo.costInfo.totalCost }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 付款方式 -->
      <el-card class="order-card">
        <div slot="header">
          <h2>付款方式</h2>
        </div>
        <div class="payment-methods">
          <div class="info-row">
            <div class="info-item">
              <span class="label">现付：</span>
              <el-input
                v-model="orderInfo.paymentMethod.cashPayment"
                class="edit-input"
                type="number"
                :disabled="isPrinting"
                @change="calculateTotalPayment"
              ></el-input>
            </div>
            <div class="info-item">
              <span class="label">预付：</span>
              <el-input
                v-model="orderInfo.paymentMethod.prePayment"
                class="edit-input"
                type="number"
                :disabled="isPrinting"
                @change="calculateTotalPayment"
              ></el-input>
            </div>
            <div class="info-item">
              <span class="label">到付：</span>
              <el-input
                v-model="orderInfo.paymentMethod.cashOnDelivery"
                class="edit-input"
                type="number"
                :disabled="isPrinting"
                @change="calculateTotalPayment"
              ></el-input>
            </div>
            <div class="info-item">
              <span class="label">周期付：</span>
              <el-input
                v-model="orderInfo.paymentMethod.periodicPayment"
                class="edit-input"
                type="number"
                :disabled="isPrinting"
                @change="calculateTotalPayment"
              ></el-input>
            </div>
          </div>
          <div class="total-payment">
            <span class="label">付费合计：</span>
            <span class="value">{{ orderInfo.paymentMethod.totalPayment }}</span>
          </div>
        </div>
      </el-card>

      <!-- 订单备注 -->
      <el-card class="order-card">
        <div slot="header">
          <h2>订单备注</h2>
        </div>
        <div class="order-remark">
          <el-input
            v-model="orderInfo.orderRemark.remark"
            type="textarea"
            rows="3"
            placeholder="请输入备注信息"
            :disabled="isPrinting"
            class="remark-input"
          ></el-input>
        </div>
      </el-card>
    </div>

    <!-- 添加货物对话框 -->
    <el-dialog
      title="添加货物"
      :visible.sync="dialogVisible"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form ref="goodsForm" :model="currentGoods" label-width="100px">
        <el-form-item label="货物名称" prop="goodsName" :rules="{required: true, message: '请输入货物名称', trigger: 'blur'}">
          <el-input v-model="currentGoods.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="quantity" :rules="{required: true, message: '请输入数量', trigger: 'blur'}">
          <el-input v-model="currentGoods.quantity" type="number"></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="unit" :rules="{required: true, message: '请输入单位', trigger: 'blur'}">
          <el-input v-model="currentGoods.unit"></el-input>
        </el-form-item>
        <el-form-item label="体积(m³)" prop="volume">
          <el-input v-model="currentGoods.volume" type="number"></el-input>
        </el-form-item>
        <el-form-item label="重量(kg)" prop="weight">
          <el-input v-model="currentGoods.weight" type="number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAddGoods">确定</el-button>
      </div>
    </el-dialog>

    <!-- 打印模板 (默认隐藏，仅用于打印) -->
    <div id="print-template" class="print-template">
      <div class="print-header">
        <h1 class="company-name">XX运输有限公司</h1>
        <h2 class="document-title">订单详情</h2>
        <div class="print-date">打印时间：{{ formatDate(new Date()) }}</div>
      </div>

      <!-- 打印内容会通过JS从主内容区复制 -->
    </div>
  </div>
</template>

<script>
import {deleteGoods, getOrderDetail, updateOrder} from '@/api/tms/orders/order';

export default {
  name: 'OrderDetail',
  data() {
    return {
      orderId: this.$route.query.orderId,
      orderInfo: {
        orderBasic: {
          orderId: '',
          customerName: '',
          customerCode: '',
          orderTime: '',
          origin: '',
          destination: '',
          transportType: '',
          orderSource: '',
          senderContact: '',
          senderPhone: '',
          senderAddress: '',
          planSendTime: '',
          receiverContact: '',
          receiverPhone: '',
          receiverAddress: '',
          planReceiveTime: '',
          totalQuantity: 0,
          totalVolume: 0,
          totalWeight: 0
        },
        vehicleRequirement: {
          vehicleType: '',
          vehicleLength: '',
          vehicleCount: ''
        },
        costInfo: {
          billingMethod: '',
          transportFee: 0,
          packagingFee: 0,     // 包装费
          fuelFee: 0,          // 燃油费
          loadingUnloadingFee: 0, // 装卸费
          serviceFee: 0,       // 服务费
          insuranceFee: 0,     // 保险费
          transferFee: 0,      // 中转费
          otherFee: 0,
          totalCost: 0
        },
        paymentMethod: {
          cashPayment: 0,
          prePayment: 0,
          cashOnDelivery: 0,
          periodicPayment: 0,
          totalPayment: 0
        },
        orderRemark: {
          remark: ''
        },
        goodsList: []
      },
      dialogVisible: false,
      currentGoods: {
        goodsId: '',
        goodsName: '',
        quantity: 0,
        unit: '',
        volume: 0,
        weight: 0
      },
      isPrinting: false
    };
  },
  created() {
    this.loadOrderDetail();
  },
  methods: {
    // 加载订单详情
    loadOrderDetail() {
      getOrderDetail(this.orderId).then(response => {
        this.orderInfo = response.data;
        // 确保数值类型的字段正确初始化
        this.initializeNumericFields();
      }).catch(error => {
        this.$message.error('加载订单详情失败：' + (error.response?.data?.msg || error.message));
      });
    },

    // 初始化数值类型字段
    initializeNumericFields() {
      // 初始化货物汇总信息
      this.calculateGoodsSummary();

      // 初始化费用合计
      this.calculateTotalCost();

      // 初始化付款合计
      this.calculateTotalPayment();
    },

    // 格式化日期
    formatDate(date) {
      if (!date) return '';
      if (!(date instanceof Date)) {
        date = new Date(date);
      }
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      }).replace(/\//g, '-');
    },


    // 添加货物
    addGoods() {
      this.currentGoods = {
        orderId: this.orderInfo.orderBasic.orderId,
        goodsId: this.orderInfo.goodsList.length + 1,
        goodsName: '',
        quantity: 0,
        unit: '',
        volume: 0,
        weight: 0,
        createTime: new Date(),

      };
      this.dialogVisible = true;
    },

    // 确认添加货物
    confirmAddGoods() {
      this.$refs.goodsForm.validate(valid => {
        if (valid) {
          this.orderInfo.goodsList.push({...this.currentGoods});
          // 重新计算序号
          this.orderInfo.goodsList.forEach((item, index) => {
            item.goodsId = index + 1;
          });
          // 重新计算汇总
          this.calculateGoodsSummary();
          this.dialogVisible = false;
          this.$message.success('货物添加成功');
        }
      });
    },

    // 删除货物
    deleteGoods(index) {
      //发送删除请求
      const goodsId = this.orderInfo.goodsList[index].goodsId;
      const orderId = this.orderInfo.orderBasic.orderId;
      const id = this.orderInfo.goodsList[index].id;
      const goodsInfo = {
        goodsId: goodsId,
        orderId: orderId,
        id: id
      }
      deleteGoods(goodsInfo).then(res => {
        if (res.code === 200) {
          this.$message.success('货物删除成功');
          this.orderInfo.goodsList.splice(index, 1);
          // 重新计算序号
          this.orderInfo.goodsList.forEach((item, idx) => {
            item.goodsId = idx + 1;
          });
          // 重新计算汇总
          this.calculateGoodsSummary();
          //this.$message.success('货物已删除');
        }
      })
    },

    // 计算货物汇总信息
    calculateGoodsSummary() {
      let totalQuantity = 0;
      let totalVolume = 0;
      let totalWeight = 0;

      this.orderInfo.goodsList.forEach(item => {
        totalQuantity += Number(item.quantity) || 0;
        totalVolume += Number(item.volume) || 0;
        totalWeight += Number(item.weight) || 0;
      });

      this.orderInfo.orderBasic.totalQuantity = totalQuantity;
      this.orderInfo.orderBasic.totalVolume = totalVolume.toFixed(2);
      this.orderInfo.orderBasic.totalWeight = totalWeight.toFixed(2);
    },

    // 计算总费用
    calculateTotalCost() {
      const transportFee = Number(this.orderInfo.costInfo.transportFee) || 0;
      const packagingFee = Number(this.orderInfo.costInfo.packagingFee) || 0;
      const fuelFee = Number(this.orderInfo.costInfo.fuelFee) || 0;
      const loadingUnloadingFee = Number(this.orderInfo.costInfo.loadingUnloadingFee) || 0;
      const serviceFee = Number(this.orderInfo.costInfo.serviceFee) || 0;
      const insuranceFee = Number(this.orderInfo.costInfo.insuranceFee) || 0;
      const transferFee = Number(this.orderInfo.costInfo.transferFee) || 0;
      const otherFee = Number(this.orderInfo.costInfo.otherFee) || 0;

      // 计算总费用并保留两位小数
      this.orderInfo.costInfo.totalCost = (
        transportFee +
        packagingFee +
        fuelFee +
        loadingUnloadingFee +
        serviceFee +
        insuranceFee +
        transferFee +
        otherFee
      ).toFixed(2);
    },

    // 计算总付款
    calculateTotalPayment() {
      const cashPayment = Number(this.orderInfo.paymentMethod.cashPayment) || 0;
      const prePayment = Number(this.orderInfo.paymentMethod.prePayment) || 0;
      const cashOnDelivery = Number(this.orderInfo.paymentMethod.cashOnDelivery) || 0;
      const periodicPayment = Number(this.orderInfo.paymentMethod.periodicPayment) || 0;

      this.orderInfo.paymentMethod.totalPayment = (cashPayment + prePayment + cashOnDelivery + periodicPayment).toFixed(2);
    },

    // 保存修改
    handleSave() {
      updateOrder(this.orderInfo).then(response => {
        this.$message.success('订单保存成功');
      }).catch(error => {
        this.$message.error('订单保存失败：' + (error.response?.data?.msg || error.message));
      });
    },

    // 处理打印
    handlePrint() {
      this.isPrinting = true;

      // 创建打印内容
      this.preparePrintContent();

      // 延迟执行打印，确保DOM已更新
      setTimeout(() => {
        // 调用浏览器打印API
        window.print();

        // 打印后清理
        this.cleanupPrintContent();
        this.isPrinting = false;
      }, 500);
    },

    // 准备打印内容
    preparePrintContent() {
      const printTemplate = document.getElementById('print-template');
      const mainContent = document.querySelector('.order-content').cloneNode(true);

      // 清除不需要打印的元素
      const buttons = mainContent.querySelectorAll('button, .el-button, .add-goods-btn');
      buttons.forEach(button => button.remove());

      // 将输入框的值转换为文本
      const inputs = mainContent.querySelectorAll('.edit-input');
      inputs.forEach(input => {
        const parent = input.parentNode;
        const value = input.value || input.getAttribute('placeholder') || '';
        const textNode = document.createTextNode(value);
        parent.replaceChild(textNode, input);
      });

      // 将主内容复制到打印模板
      const printContentContainer = document.createElement('div');
      printContentContainer.className = 'print-content';
      printContentContainer.appendChild(mainContent);

      // 清除原有内容并添加新内容
      while (printTemplate.children.length > 1) {
        printTemplate.removeChild(printTemplate.lastChild);
      }
      printTemplate.appendChild(printContentContainer);
    },

    // 清理打印内容
    cleanupPrintContent() {
      const printTemplate = document.getElementById('print-template');
      const printContent = printTemplate.querySelector('.print-content');
      if (printContent) {
        printTemplate.removeChild(printContent);
      }
    },

    // 返回列表
    handleBack() {
      this.$router.push('/orders/orderList');
    }
  }
};
</script>

<style scoped>
.order-detail-container {
  padding: 20px;
  background-color: #f9f9f9;
  min-height: 100vh;
}

.order-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e8e8;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.order-card {
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.order-basic-info, .contact-details, .other-details, .payment-methods {
  padding: 10px 0;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.info-item {
  flex: 1;
  min-width: 200px;
  margin-bottom: 10px;
  padding-right: 15px;
  display: flex;
  align-items: center;
}

.label {
  color: #666;
  display: inline-block;
  width: 100px;
  font-weight: 500;
}

.value {
  color: #333;
  flex: 1;
}

.edit-input {
  width: 100%;
  max-width: 200px;
}

.table-input {
  max-width: 100px;
}

.contact-info {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.contact-card {
  flex: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.sender-card .el-card__header {
  background-color: #f5f7fa;
}

.receiver-card .el-card__header {
  background-color: #f0f9eb;
}

.add-goods-btn {
  float: right;
  color: #409eff;
}

.goods-summary {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
  margin-top: 10px;
  border-top: 1px solid #e8e8e8;
}

.summary-item {
  margin-left: 30px;
  display: flex;
  align-items: center;
}

.other-info {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.other-card {
  flex: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.total {
  color: #f56c6c;
  font-weight: bold;
}

.total-payment {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
}

.total-payment .label {
  font-weight: bold;
}

.total-payment .value {
  color: #f56c6c;
  font-weight: bold;
  font-size: 16px;
}

.order-remark {
  padding: 10px;
  line-height: 1.6;
  color: #333;
  min-height: 60px;
}

.remark-input {
  width: 100%;
  min-height: 100px;
}

/* 打印相关样式 */
.print-template {
  display: none;
}

/* 打印样式设置 */
@media print {
  /* 隐藏非打印内容 */
  .order-actions, .el-pagination, .el-dialog__wrapper {
    display: none !important;
  }

  /* 打印区域样式 */
  body, .order-detail-container {
    background-color: #fff;
    padding: 0;
    margin: 0;
    min-height: auto;
  }

  .print-template {
    display: block;
    width: 100%;
    padding: 20px;
  }

  .print-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #333;
  }

  .company-name {
    font-size: 24px;
    margin-bottom: 10px;
    color: #333;
  }

  .document-title {
    font-size: 20px;
    margin-bottom: 10px;
    color: #555;
  }

  .print-date {
    text-align: right;
    color: #666;
    font-size: 14px;
  }

  .print-content .order-card {
    border: 1px solid #ddd;
    margin-bottom: 15px;
    page-break-inside: avoid; /* 避免在卡片内分页 */
  }

  .el-card__header {
    background-color: #f5f5f5 !important;
    color: #333 !important;
  }

  .el-table {
    border-collapse: collapse;
    width: 100%;
  }

  .el-table th, .el-table td {
    border: 1px solid #ddd !important;
    padding: 8px !important;
  }

  /* 确保表格不被截断 */
  table {
    page-break-inside: avoid;
  }

  /* 打印分页设置 */
  @page {
    size: A4;
    margin: 20mm;
  }

  /* 去除链接颜色 */
  a {
    text-decoration: none;
    color: #000;
  }
}
</style>
